<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>THTML</title>
    <link rel="stylesheet" href="css/css_1.css">
</head>
<body>
<!-- 页头 -->
<header>
    <img src="images/baidu.png" alt="baidu-tag">
    <nav>
        <ul>
            <li><a href="#">导航链接一</a></li>
            <li><a href="#">导航链接二</a></li>
            <li><a href="#">导航链接三</a></li>
            <li><a href="#">导航链接四</a></li>
        </ul>
    </nav>
</header>

<!-- 对应内容板块 -->
<div id="main-part">
    <section id="part-1">
        <article>
            <h1>第一篇文章一级标题</h1>
            <h2>文章二级标题</h2>
            <div>
                <span>文章作者</span>
                <span>文章发表时间</span>
            </div>

            <p>第一篇文章内容开始--------------------------------------------------------------------
            ----------------------------------------------------------------------------------------
            ----------------------------------------------------------------------------------------
            ----------------------------------------------------------------------------------------
            <a href="#">这里有一个链接</a>
            ----------------------------------------------------------------------------------------
            ----------------------------------------------------------------------------------------
            ----------------------------------------------------------------------------------------
            ----------------------------------------------------------------------------------------
            ----------------------------------------------------------------------------------------
            ----------------------------------------------------------------------------------------
            第一篇文章内容结束</p>
            <img src="images/神乐438×300.png" alt="Shenle 400*300">
            <p>第一篇文章内容开始--------------------------------------------------------------------
            ----------------------------------------------------------------------------------------
            ----------------------------------------------------------------------------------------
            ----------------------------------------------------------------------------------------
            <a href="#">这里有一个链接</a>
            ----------------------------------------------------------------------------------------
            ----------------------------------------------------------------------------------------
            ----------------------------------------------------------------------------------------
            ----------------------------------------------------------------------------------------
            ----------------------------------------------------------------------------------------
            ----------------------------------------------------------------------------------------
            第一篇文章内容结束</p>
        </article>

        <article>
            <h1>第二篇文章一级标题</h1>
            <h2>文章二级标题</h2>
            <div>
                <span>文章作者</span>
                <span>文章发表时间</span>
            </div>

            <p>第二篇文章内容开始--------------------------------------------------------------------
            ----------------------------------------------------------------------------------------
            ----------------------------------------------------------------------------------------
            ----------------------------------------------------------------------------------------
                <a href="#">这里有一个链接</a>
            ----------------------------------------------------------------------------------------
            ----------------------------------------------------------------------------------------
            ----------------------------------------------------------------------------------------
            ----------------------------------------------------------------------------------------
            ----------------------------------------------------------------------------------------
            ----------------------------------------------------------------------------------------
            第二篇文章内容结束</p>
            <img src="images/神乐400×300.png" alt="Shenle 400*300">
            <nav>
            <ul>
                <li>列表项目一</li>
                <li>列表项目二</li>
                <li>列表项目三</li>
            </ul>
        </nav>
        </article>
    </section>

    <section id="part-2">
        <div>
            <h1>图片</h1>
            <figure>
                <figcaption>神乐001</figcaption>
                <img src="images/神乐400×300_01.png" alt="Shenle 001">
            </figure>
            <figure>
                <figcaption>神乐002</figcaption>
                <img src="images/神乐400×300_02.png" alt="Shenle 002">
            </figure>
            <figure>
                <figcaption>神乐003</figcaption>
                <img src="images/神乐400×300_03.png" alt="Shenle 003">
            </figure>
            <figure>
                <figcaption>神乐004</figcaption>
                <img src="images/神乐400×300_04.png" alt="Shenle 004">
            </figure>
            <figure>
                <figcaption>神乐005</figcaption>
                <img src="images/神乐400×300_05.png" alt="Shenle 005">
            </figure>
        </div>
    </section>

    <section id="part-3">
        <article>
            <h1>最后一篇文章标题</h1>
            <div>
                <span>文章作者</span>
                <span>文章发表时间</span>
            </div>
            <ol>
                <li>排名1</li>
                <li>排名2</li>
                <li>排名3</li>
            </ol>
            <div>
                <p>下面是一个表格，给表格添加一个"border='1'"好让表格看起来是一个表格</p>
                <table border="1">
                    <thead>
                        <tr>
                            <th>表头</th>
                            <th>表头</th>
                            <th>表头</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>表内容单元格</td>
                            <td>表内容单元格</td>
                            <td><a href="#table">操作</a></td>
                        </tr>
                        <tr>
                            <td>表内容单元格</td>
                            <td>表内容单元格</td>
                            <td><a href="#table">操作</a></td>
                        </tr>
                        <tr>
                            <td>表内容单元格</td>
                            <td>表内容单元格</td>
                            <td><a href="#table">操作</a></td>
                        </tr>
                        <tr class="foot-table">
                            <td>总计</td>
                            <td colspan="2">1000</td>
                        </tr>
                    </tbody>
                </table>
            </div>

        </article>
    </section>
</div>
<!-- 侧栏 -->
<aside>
    <h1>这是一个侧栏，这是侧栏标题</h1>
    <div>
        <h1>侧栏注册窗口标题</h1>
            <form action="" method="post">
            <p id="e-mail">
                <label for="e-mail-input">请输入邮箱地址： </label>
                <input type="email" id="e-mail-input" name="e-mail" value="请输入邮箱地址">
                <p id="e-mail-statement">邮箱地址请按格式输入</p>
            </p>
            <p id="password">
                <label for="password1">请输入密码：</label>
                <input type="password" id="password1" name="password1" minlength="6" maxlength="16">
                <br>
                <label for="password2">请再一次输入密码：</label>
                <input type="password" id="password2" name="password2" minlength="6" maxlength="16">
                <p id="password-statement">密码为10到16位英文数字</p>
            </p>
            <p id="gender">
                <span>性别：</span>
                <input type="radio" id="male" name="gender" value="male">
                <label for="male">男</label>
                <input type="radio" id="female" name="gender" value="female" checked>
                <label for="female">女</label>
            </p>
            <p id="city">
                <label for="city-options">城市：</label>
                <select id="city-options" name="city">
                    <option value="Beijing">Beijing</option>
                    <option value="Hunan">Hunan</option>
                    <option value="Shanghai">Shanghai</option>
                    <option value="Shenzhen">Shenzhen</option>
                </select>
            </p>
            <p id="hobby">
                <label for="hobby">爱好：</label>
                <input type="checkbox" name="hobby" value="basketball">篮球
                <input type="checkbox" name="hobby" value="run" checked>跑步
                <input type="checkbox" name="hobby" value="football">足球
                <input type="checkbox" name="hobby" value="baseball">网球
            </p>
            <p id="description">
                <label for="description">个人描述：</label>
                <textarea>请输入文本</textarea>
            </p>

            <input id="submit-button" type="submit" value="确认提交">
        </form>
    </div>
</aside>
<!-- 页脚 -->
<footer>
    <p>版权所有&copy;</p>
</footer>
</body>
</html>